<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" th:href="@{/css/register.css}">
</head>
<body>
    <form action="/register" method="post" onsubmit="return check()">
        <label for="username">&nbsp&nbsp&nbsp用户名:&nbsp<input id="username" type="text" placeholder="用户名" name="username">*</label><br>
        <label for="">设置密码:&nbsp<input id="password" type="password" placeholder="密码" name="password">*</label><br>
        <label for="">确认密码:&nbsp<input id="repassword" type="password" placeholder="密码" name="repassword">*</label><br>
        <div class="bts">
            <input type="submit" value="注册">
            <p id="error" th:text="${message}"></p>
        </div>
    </form>
    <div class="footer">
        适用浏览器：chrome
    </div>
</body>
<script>
    function check() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var repassword = document.getElementById("repassword").value;
        var error = document.getElementById("error");
        if (username === "") {
            error.innerHTML = "账号不能为空";
            return false;
        } else if (password === "") {
            error.innerHTML = "密码不能为空";
            return false;
        } else if (password.length < 6 || password.length > 16) {
            error.innerHTML = "密码长度必须为6-16位";
            return false;
        } else if (password !== repassword) {
            error.innerHTML = "两次输入的密码不一样";
            return false;
        }
        return true;
    }
</script>
</html>